import React, { Component } from 'react'
import mjj from "../../../assets/images/mjj.jpg"
import styles from "./Order.module.scss"
import "./antd.scss"
import { Tabs, WhiteSpace } from 'antd-mobile';
import FoodList from "../FoodList"

/*
此为菜品列表- 商家推荐下面的大组件 
包含了FoodList组件
*/
const tabs2 = [
    { title: '热销', sub: '1' },
    { title: '优惠', sub: '2' },
    { title: '招牌', sub: '3' },
    { title: '必点', sub: '4' },
    { title: '加料', sub: '5' },
];


export default class FoodOrder extends Component {

    state = {
        nowIndex:0,
        foodNum:[
            {id:1,name:"招牌麻椒鸡 (大份)",des:"本店招牌菜，经典藤椒味...",price:"49.9"},
            {id:2,name:"招牌麻椒鸡 (中份)",des:"本店招牌菜，经典藤椒味...",price:"39.9"},
            {id:3,name:"招牌麻椒鸡 (小份)",des:"本店招牌菜，经典藤椒味...",price:"29.9"},
            {id:4,name:"麻辣手撕鸡 (大份)",des:"本店招牌菜，经典藤椒味...",price:"49.9"},
            {id:5,name:"酸辣手撕鸡 (大份)",des:"本店招牌菜，经典藤椒味...",price:"49.9"}
        ]
    }

    changeIndex = (i)=>{
        console.log(i.sub);
        
        this.setState({
            nowIndex:i.sub-1
        })
    }
    render() {
        return (
            <div id={styles.Order}>
                <div className={styles.orderBox}>
                    {/* 第一层展示图 */}
                    <div className={styles.showImg}>
                        <img src={mjj} alt="麻椒鸡" />
                    </div>
                    {/* 商家推荐 */}
                    <div className={styles.recommend}>
                        <h2 className={styles.rcdTit}>商家推荐</h2>
                        <div className={styles.itemBox}>
                            <div className={styles.recommendItem}>
                                <img src={mjj} alt="麻椒鸡" />
                                <span className={styles.itemName}>大份麻椒鸡</span>
                                <span className={styles.itemPrice}>￥49.9起</span>
                            </div>
                            <div className={styles.recommendItem}>
                                <img src={mjj} alt="麻椒鸡" />
                                <span className={styles.itemName}>小份麻椒鸡</span>
                                <span className={styles.itemPrice}>￥39.9起</span>
                            </div>
                            <div className={styles.recommendItem}>
                                <img src={mjj} alt="麻椒鸡" />
                                <span className={styles.itemName}>招牌麻椒鸡</span>
                                <span className={styles.itemPrice}>￥49.9起</span>
                            </div>
                        </div>
                    </div>

                </div>
                {/* 菜品列表 */}
                <div className={styles.orderList}>
                    <WhiteSpace />
                    <Tabs 
                        tabs={tabs2}
                        initialPage={false}
                        tabBarPosition="left"
                        tabBarInactiveTextColor={"#999"}
                        tabBarUnderlineStyle={{height:"50px",top:this.state.nowIndex*50}}
                        renderTab={tab => <span className={styles.tabsNav}>{tab.title}</span>}
                        onTabClick={this.changeIndex}
                    >
                        <div>
                            <FoodList foodNum={this.state.foodNum}></FoodList>
                        </div>
                        <div>
                            <FoodList foodNum={this.state.foodNum}></FoodList>
                        </div>
                        <div>
                            <FoodList foodNum={this.state.foodNum}></FoodList>
                        </div>
                        <div>
                            <FoodList foodNum={this.state.foodNum}></FoodList>
                        </div>
                        <div>
                            <FoodList foodNum={this.state.foodNum}></FoodList>
                        </div>
                    </Tabs>
                    <WhiteSpace />
                </div>
            </div>
        )
    }
}
